<template>
    <div>
        <el-card>
            <div slot="header" class="clearfix">
                <h2>模板上传</h2>
            </div>
            <div>
                <el-form ref="form" label-width="80px">
                    <el-form-item label="模板">
                        <el-upload ref="upload"
                                    action="/api/externalexchangeservice/course/plan/upload"
                                    :multiple="false"
                                    :on-success="handleSuccess"
                                    :on-error="handleError"
                                    :limit="1"
                                    :file-list="fileList"
                                    :show-file-list="false"
                                    :before-upload="beforeUpload">
                            <el-button slot="trigger"
                                    size="small"
                                    icon="el-icon-upload"
                                    type="primary" style="margin-left:10px">上传
                            </el-button>
                            <span slot="tip" class="el-upload__tip" style="margin-left: 5px;">{{$t('exchangeApproval.uploadOnly')}}</span>
                        </el-upload>
                        <div style="color: #4C5C70;margin: 5px 10px 0;" v-if="tempTitle"> 
                            当前保存模板文件为 <el-button type="text" size="medium" @click="downLoad">{{tempTitle}}</el-button>
                        </div>
                </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script>
import UTILS from "common/src/utils/utils";
import {
   getCourseTemplate
} from 'common/src/api/internationalExchanges/switchSetting'
export default {
    data() {
        return {
          tempTitle: '',
          objectkey: '',
          fileList: []  
        }
    },
    created() {
        this.getCourseTemplate();
    },
    methods: {
        async getCourseTemplate() {
            let param = {
                tempType: 0
            };
            let {code, data} = await getCourseTemplate(param);
            if (code == 200) {
                let [{templateName, objectKey}] = data || [{}];
                console.log(objectKey,23333)
                this.tempTitle = templateName;
                this.objectKey = objectKey;
            }
        },
        handleSuccess() {
            this.$message({
                type: "success",
                message: '上传成功'
            })
            this.$refs.upload.clearFiles();
            this.fileList = [];
            this.getCourseTemplate();
        },
        handleError(){
            this.$message({
                message: '上传失败',
                type: 'error',
            })
        },
        beforeUpload(file) {
            return UTILS.checkFile(
                file,
                {
                    name: '.jpg,.png,.gif,.doc,.docx,.xlsx,.xls,.pdf',
                    size: '5'
                },
                this
            )
        },
        downLoad() {
            window.location.href = `/api/commonservice/obsfile/downloadfile?objectkey=${this.objectKey}`;
        }
    },
}
</script>

<style>

</style>